<script lang="ts" setup>
import type { PhaseType, SubTaskType } from '@/types/micro-scene';
import SubTitle from './components/SubTitle.vue';
import SubTask from './components/SubTask.vue';
import { computed, onMounted, ref } from 'vue';
import { useUserStore } from '@/stores/useUserStore';
import { PlusOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
import { addSubstate, deleteSubstate, getSubstateIdList } from '@/api/MicroScene/MicroSceneSubstateApi';
import { useRoute } from 'vue-router';
const props = defineProps<{
  phaseId: string
  beginEndId: string
}>()
const route = useRoute()
const userStore = useUserStore();
const showEdit = computed(() => {
  return userStore.isEditMicroScene
})
const subPhaseIDList = ref<string[]>([]);
const getSubPhaseIDList = async () => {
  const response = await getSubstateIdList(Number(route.params.id), Number(props.phaseId))
  subPhaseIDList.value = response
}
onMounted(() => {
  getSubPhaseIDList();
})

const handleAdd = async () => {
  await addSubstate(Number(route.params.id), Number(props.phaseId))
  message.success('添加任务成功');
  getSubPhaseIDList();
}
// 删除任务
const handleDelete = (subPhaseId: string) => {
  Modal.confirm({
    title: '确定要删除吗？',
    content: '删除后将无法恢复',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      // 从列表中删除对应的资源
      await deleteSubstate(Number(route.params.id), Number(subPhaseId))
      message.success('删除成功');
      getSubPhaseIDList();
    },
    onCancel: () => {
      return false;
    },
  });
}
</script>

<template>
  <div class="flex items-center">
    <SubTitle title="具体任务" />
    <a-button v-show="showEdit" type="primary" class="ml-4" @click="handleAdd">
      添加任务
      <template #icon>
        <PlusOutlined />
      </template>
    </a-button>
  </div>

  <div v-for="subPhaseId in subPhaseIDList" :key="subPhaseId">
    <SubTask :sub-phase-id="subPhaseId" :phase-id="props.phaseId" :begin-end-id="props.beginEndId" @delete="handleDelete" />
  </div>
</template>

<style lang="scss" scoped>

</style>
